<template>
  <div class="searchInfoPanel"  @mousedown="mousedown" :style="'position:fixed;left:'+left+'px;top:'+top+'px;'">
    <div class="title">
      <p>当前操作信息</p>
      <i class="close el-icon-close" @click="close"></i>
    </div>
    <div class="container">
      <div class="title">
        <p>当前区域</p>
      </div>
      <div class="content region">
        <p :title="regionText">{{regionText}}</p>
      </div>
      <div class="title">
        <p>数据对象</p>
      </div>
      <div class="content">
        <p>{{selectedSearchParams.microName||''}}</p>
      </div>
      <div class="title">
        <p>统计指标</p>
      </div>
      <div class="content">
        <p>{{idenName}}</p>
      </div>
      <div class="title">
        <p>查询条件</p>
      </div>
      
      <div class="content allsearch" >
        <p v-for="(item,index) in searchValue" :key="index">{{index+1}}、{{item}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import microConfig from "static/config/micro.js";
export default {
  name: "searchInfoPanel",
  props: [],
  data() {
    return {
      left: document.documentElement.clientWidth - 410,
      top: 250,
      selectedSearchParams: {},
      searchValue: [],
      valueArr: [],
      regionArr:[],
      regionText:"",
      idenName:"单位个数"
    };
  },
  mounted() {
    EventBus.$on("updateMicroSearchItem", this.updateMicroSearchItem);
    EventBus.$on("updateMicroSearch", this.updateMicroSearchItem);
    EventBus.$on("updateSelectedIdenValue", this.updateSelectedIdenValue);
    this.init();
  },
  methods: {
    ...mapMutations(["changeSearchInfoPanel"]),
    init() {
      let that = this;
      let text_content = microConfig.text_content;
      let num_content = microConfig.num_content;
      let iden_content = microConfig.iden_content;
      for (let i in text_content) {
        that.valueArr.push(text_content[i]);
      }
      for (let i in num_content) {
        that.valueArr.push(num_content[i]);
      }
      for (let i in iden_content) {
        that.valueArr.push(iden_content[i]);
      }
    },
    updateSelectedIdenValue(item,idenName){
      let that = this;
      if(item.sort == this.selectedSearchParams.sort){
        that.idenName = idenName;
      }
    },
    updateMicroSearchItem(microSearchParams, selectedSearchParams, type) {
      let that = this;
      that.searchValue = [];
      that.idenName="单位个数";
      this.selectedSearchParams = selectedSearchParams;
      
      //获取查询区域
      that.regionArr = selectedSearchParams.regions.regionArr;
      that.regionText = "";
      for(let i in that.regionArr){
        that.regionText += that.regionArr[i].regionName+'、';
      }
      //将字符串中最后一个元素","逗号去掉，
      that.regionText =
          that.regionText.substring(that.regionText.length - 1) == "、"
            ? that.regionText.substring(0, that.regionText.length - 1)
            : that.regionText;

      //组装查询条件
      let mainconditions = that.selectedSearchParams.mainconditions;
      mainconditions.map(item =>{
        let text = "";
        if(item.hasOwnProperty("valueName")&&item.valueName!=""){
          that.searchValue.push(item.valueName)
        }
      })
    },
    close() {
      this.$store.commit("changeSearchInfoPanel", false);
    },
    mousedown(e) {
      if (e.srcElement.className == "title") {
        document.onmousemove = e2 => {
          this.left = e2.clientX - e.offsetX;
          this.top = e2.clientY - e.offsetY;
        };
        document.onmouseup = () => {
          document.onmousemove = null;
          document.onmousedown = null;
        };
      }
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../css/rule.scss";
.searchInfoPanel {
  width: 360px;
  height: 350px;
  font-size: 1.4rem;
  z-index: 999;
  background: $panelContentBg;
  -webkit-box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  right: 48px;
  position: absolute;
  top: 153px;
  .title {
    height: 35px;
    background: $panelTitleBg;
    font-size: 1.6rem;
    color: $fontColorW;
    cursor: move;
    span {
      float: left;
      line-height: 35px;
      margin-left: 15px;
      font-weight: bold;
    }
    .close {
      float: right;
      line-height: 35px;
      margin-right: 8px;
      cursor: pointer;
      color: #fff;
    }
    p {
      text-align: left;
      float: left;
      line-height: 35px;
      margin-left: 10px;
      font-size: 1.4rem;
    }
  }
  .container {
    padding-top: 10px;
    .title {
      height: 35px;
      background: none;
      font-size: 1.6rem;
      color: #fff;
      cursor: default;
      position: relative;
      p {
        background: #4396af;
        padding: 0 10px;
        left: -20px;
        position: absolute;
        border-radius: 0 2px 2px 0;
        height: 30px;
        line-height: 30px;
        font-size: 1.4rem;
      }
    }
    .title:after {
      position: absolute;
      content: "";
      top: 30px;
      left: -10px;
      border-top: 0em solid #4396af;
      border-right-width: 1em;
      border-right-color: inherit;
      border-right-style: solid;
      border-bottom: 1em solid transparent;
      border-left: 0em solid transparent;
      width: 0em;
      height: 0em;
      color: #3e869c;
    }
    .content {
      margin: 2px 10px;
      p {
        color: $fontColorLimit;
        font-size: 1.4rem;
      }
    }
    .region{
      p{
        overflow: hidden;
        width: 340px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .allsearch{
      height: 86px;
      overflow: auto;
    }
  }
}
</style>
